<template>
  <div class="my-claim">
    <van-nav-bar left-text="返回" left-arrow @click-left="backPrePage">
    </van-nav-bar>
    <h5 class="my-h">医疗、疾病</h5>
    <div class="claim-box">

      <van-cell-group class="v-cell" v-for="(item,index) in claimData" :key="index">
        <van-cell title="被保人:" :value="item.recognizee"/>
        <van-cell title="出险原因" :value="item.reason"/>
        <van-cell title="出险时间" :value="item.claimTime"/>
        <van-cell title="理赔项目"/>
      </van-cell-group>
      <div v-for="(item,index) in checkboxList" :key="index" direction="horizontal">
        <van-checkbox class="my-checkbox-col" v-model="checked" disabled>{{ item.name }}</van-checkbox>
      </div>

    </div>
    <van-row>
      <van-col class="claim-col">可能理赔的保单：</van-col>
    </van-row>
    <van-field class="my-van" name="checkboxGroup" label="">
      <template #input>
        <van-checkbox-group v-model="checkboxGroup"
                            direction="horizontal">
          <van-checkbox icon-size="18px" span="20" name="1" shape="square">多倍保-新华</van-checkbox>
          <van-button class="my-button" type="info" size="mini">查看保单</van-button>
          <van-checkbox icon-size="18px" name="2" shape="square">百万医疗-泰康</van-checkbox>
          <van-button class="my-button2" type="info" size="mini">查看保单</van-button>
          <van-checkbox icon-size="18px" name="3" shape="square">高端医疗-友邦</van-checkbox>
          <van-button class="my-button3" type="info" size="mini">查看保单</van-button>
        </van-checkbox-group>
      </template>
    </van-field>

    <van-button @click="toClaimApplyPage(0)" type="info" size="large" class="my-botton">下一步</van-button>
  </div>
</template>

<script>
import storage from '@/utils/storage.js'

export default {
  name: "ApplyClaim",
  data() {
    return {
      result: ["a", "b"],
      result2: ["a", "b"],
      claimData: [{
        recognizee: "张三",
        reason: "由于xxx导致的",
        project: "xxxx项目",
        claimTime: "2021-12-19",
        claimSrc: "../static/images/medical.png",
      }],
      checked: true,
      //选中的数组
      checkboxGroup: [],
      claimNum: [
        {
          "id": 1,
          "title": "好医保-免费医疗金",
          "desc": "保单数量:" + 1,
          "thumb": "../static/images/die.png"
        }
      ],
      recognizee: '',
      claimTime: '',
      checkboxList: []
    }
  },
  created() {
    //获取多选框参数
    this.getClaimProject();
    this.recognizee = this.$route.query.value
    this.claimTime = this.$route.query.timeValue

    //获取URL中的参数，并封装到对象
    this.claimData = [{
      recognizee: this.$route.query.value,
      reason: this.$route.query.value2,
      claimTime: this.$route.query.timeValue,
      claimSrc: "../static/images/medical.png",
    }]

  },
  methods: {
    //获取理赔项目
    getClaimProject() {
      storage.get('checkboxGroup').forEach((item, index) => {
        this.checkboxList.push({id: index, name: item})
      })
    },
    backPrePage() {
      this.$router.go(-1);
    },
    toClaimApplyPage(index) {
      if (index === 0) {
        this.$router.push('/other/claim?value=' + this.recognizee + "&value2=" + this.claimTime)
        // this.$router.push({path: '/other/claim', query: {id: index}})
      }
    },
  }
}
</script>

<style lang="less" scoped>
.my-claim {
  background-color: #F7F7F7;
  width: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
}

.my-h {
  margin-top: 4%;
  margin-bottom: 5%;
}

img {
  height: 120px;
  width: 120px;
  padding-left: 220px;
}

h5 {
  //margin-top: 25px;
  margin-left: 20px;
  font-size: 20px;
}

p {
  font-size: 17px;
  margin-top: 18px;
  margin-bottom: 5px;
}

.claim-box {
  background-color: #FFFFFF;
}

.van-card {
  background-color: #FFFFFF !important;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 20px;
}

.van-card__title {
  max-height: 32px !important;
  font-weight: bold !important;
  line-height: 20px !important;
  font-size: 20px !important;
  margin-top: 5px;
  color: #333333;
}

.van-card__desc {
  max-height: 60px !important;
  color: #646566;
  line-height: 85px !important;
  font-size: 15px;
}

.a-1 {
  margin-top: 28px;
  font-size: 15px;
}

.claim-col {
  margin-top: 6%;
  margin-left: 10%;
  font-size: 18px;
}

.my-botton {
  height: 50px;
  width: 300px;
  margin-top: 7%;
  margin-left: 10%;
  margin-bottom: 2%;
  border-radius: 5px;
}

.my-van {
  margin-top: 10px;
}

.my-van-col {
  margin-left: 10%;
}


.my-checkbox-col {
  font-size: 15px;
  margin-top: 5%;
  margin-left: 10%;

}

/deep/ .van-checkbox__label--disabled {
  color: #1f1f20 !important;
}

.my-button {
  margin-left: 45%;
}

.my-button2 {
  margin-left: 41%;
  margin-top: 3%;
}

.my-button3 {
  margin-left: 41%;
  margin-top: 3%;
}
</style>
